<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SuperMap iServer 地图</title>
    <!-- 引入 Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        #map {
            width: 100%;
            height: calc(100vh - 60px);
        }

        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
 
    </style>
</head>

<body>
    <div id="map"></div>
    <!-- 引入 Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    
    <script>

        try {
            // 初始化地图
            const map = L.map('map', {
                crs: L.CRS.EPSG4326,
                center: [40, 100],
                maxZoom: 21,
                zoom: 5,
            });


            // 添加 SuperMap iServer WMS 图层
            const supermapLayer = L.tileLayer.wms('https://iserver.supermap.io/iserver/services/map-china400/wms111/China_4326', {
                layers: 'China_4326',
                format: 'image/png',
                transparent: true,
                noWrap: true,
                attribution: "Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span>"
            });

            supermapLayer.addTo(map);


            // 添加地图事件监听
            map.on('zoomend', () => {
               
            });

            map.on('moveend', () => {
                
            });
        }  catch (error) {
            console.error('初始化地图时出错:', error);
        }

    </script>
</body>

</html>